<div class="container">
  <div class="col-md-4 col-md-offset-4">
    <div class="signin-pannel" v-else>
      <div class='form-group form-group-lg'>
        <input class='form-control' v-model='loginname' size='30' type='text' value='' placeholder="账号"/>
      </div>

      <div class='form-group form-group-lg'>
        <input class='form-control' v-model='password' size='30' type='password' placeholder="密码"/>
      </div>


      <div class='form-group form-group-lg'>
        <input class='form-control' v-model='rePassword' size='30' type='password' placeholder="重复密码"/>
      </div>


      <div class='form-group form-group-lg'>
        <input class='form-control' v-model='email' size='30' type='text' placeholder="电子邮件"/>
      </div>
      <button class='btn btn-primary btn-lg btn-block' v-on:click="submit">注册</button>
    </div>
  </div>
</div>
<script>
  var appId = $('[name=app-id]').val();
  var dataPrefix = '<%= apiPrefix.data %>';

  var vue = new Vue({
    el: '#app',
    data: {
      loginname: '',
      password: '',
      rePassword: '',
      email: '',
      errorMsg: '',
      successMsg: '',
    },
    methods: {
      submit: function(event) {
        vue.successMsg = '';
        vue.errorMsg = '';
        $.post( dataPrefix + '/user/signup',
          { appId: appId,
            _csrf: $('#_csrf').val(),
            loginname: this.loginname,
            password: this.password,
            rePassword: this.rePassword,
            email: this.email
          },
          function (result) {
            if (result.err) {
              vue.errorMsg = result.err;
            } else {
              vue.successMsg = result.msg;
            }
        });
      }
    }
  });

</script>
